<template>
	<my-bottom-popup
		title="选择上门时间"
		cancel
		confirm
		@confirm="confirm"
	>
		<scroll-view class="scroll-date" scroll-x>
			<view class="scroll-container" :style="{ width: dateList.length * 128 + 'rpx' }">
				<view :class="['scroll-item', {'scroll-item-active': timeInfo.date === item.date}]" v-for="item in dateList" :key="item.date" @click="changeDate(item.date)">
					<view class="date">{{ item.dateText }}</view>
					<view class="weekday">{{ item.weekday }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="AM-PM">
			<view v-if="productDetail.morningServiceStartTime" :class="['AM', { active: isAM }]" @click="changeAMPM(true)">上午 {{ productDetail.morningServiceStartTime }}-{{ productDetail.morningServiceEndTime }}</view>
			<view v-if="productDetail.afternoonServiceStartTime" :class="['PM', { active: !isAM }]" @click="changeAMPM(false)">下午 {{ productDetail.afternoonServiceStartTime }}-{{ productDetail.afternoonServiceEndTime }}</view>
		</view>
		<view class="time-options">
			<view
				v-for="time in timeOptions"
				:class="['option', { active: time === timeInfo.startTime, disabled: disabledOption(time) }]"
				@click="selectTime(time)"
			>
				{{ time }}
			</view>
		</view>
	</my-bottom-popup>
</template>

<script lang="ts" setup>
	import { reactive, ref, computed } from 'vue';
	import MyBottomPopup from '@/components/my-bottom-popup/my-bottom-popup.vue';
	import dayjs from 'dayjs';
	import localeZhCn from 'dayjs/locale/zh-cn';
	dayjs.locale(localeZhCn);
	
	const emits = defineEmits(['confirm']);
	const props = defineProps({
		productDetail: {
			type: Object,
			default: () => ({}),
		}
	});
	
	const timeInfo = reactive({
		date: dayjs().add(1, 'day').format('YYYYMMDD'),
		startTime: '',
	});
	const dateList = ref([]);
	const changeDate = (date: string): void => {
		timeInfo.date = date;
	};
	// 填充天列表
	const fillDateList = (): void => {
		const today = dayjs().format('YYYYMMDD');
		const tomorrow = dayjs().add(1, 'day').format('YYYYMMDD');
		const list = Array(30).fill('');
		list.forEach((_, index: number) => {
			const data = {
				date: dayjs().add(index + 1, 'day').format('YYYYMMDD'),
				dateText: dayjs().add(index + 1, 'day').format('MM月DD日'),
				weekday: dayjs().add(index + 1, 'day').format('dddd'),
			};
			
			if (data.date === today) {
				data.weekday = '今天';
			} else if (data.date === tomorrow) {
				data.weekday = '明天';
			}
			dateList.value.push(data);
		});
	};
	fillDateList();
	
	// 上午时间段
	const isAM = ref<boolean>(true);
	// 切换时间段
	const changeAMPM = (timeSlots: boolean): void => {
		isAM.value = timeSlots;
	}
	// 生成时间选项
	const generateTimeSlots = (startTime: string, endTime: string): Array<string> => {  
	  const slots = [];
	  
	  const startDate = new Date();
		const [startHour, startMinute] = startTime.split(':');
	  startDate.setHours(+startHour, +startMinute, 0, 0);
	  
	  const endDate = new Date();
		const [endHour, endMinute] = endTime.split(':');
	  endDate.setHours(+endHour, +endMinute, 0, 0);
	    
	  const currentDate = new Date(startDate);
	  while (currentDate <= endDate) {
	    slots.push(dayjs(currentDate).format('HH:mm')); // 将日期格式化为HH:mm格式并添加到数组中  
	    currentDate.setMinutes(currentDate.getMinutes() + 30); // 将当前时间增加30分钟  
	  }  
	  return slots;  
	}
	// 当前时间加1天
	const currentTimeAddDay = dayjs().add(1, 'day').unix();
	// 禁用时间选项
	const disabledOption = (time: string): boolean => {
		// 选项时间
		const optionTime = dayjs(`${timeInfo.date} ${time}`).unix();
		// 如果选项时间 小于 当前时间加1天禁用
		return optionTime < currentTimeAddDay;
	};
	// 时间选项
	const timeOptions = computed(() => {
		const {
			morningServiceStartTime,
			morningServiceEndTime,
			afternoonServiceStartTime,
			afternoonServiceEndTime,
		} = props.productDetail;
		let startTime = morningServiceStartTime;
		let endTime = morningServiceEndTime;
		
		if (!isAM.value) {
			startTime = afternoonServiceStartTime;
			endTime = afternoonServiceEndTime;
		}
		return generateTimeSlots(startTime, endTime);
	});
	// 选择时间选项
	const selectTime = (time: string): void => {
		if (disabledOption(time)) return;
		timeInfo.startTime = time;
	};
	
	// 确认选择上门时间
	const confirm = () => {
		let serviceStartTime = '';
		if (timeInfo.startTime) {
			serviceStartTime = dayjs(timeInfo.date).format(`YYYY-MM-DD ${timeInfo.startTime}:00`)
		}
		emits('confirm', serviceStartTime);
	};
</script>

<style lang="scss" scoped>
	.scroll-date {
		width: 100%;
		height: 98rpx;
		background: #3E9DBB;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		display: flex;
		padding: 5rpx 0;
		box-sizing: border-box;
		.scroll-container {
			height: 88rpx;
			display: flex;
			padding: 0 12rpx;
			.scroll-item-active {
				background: #65b1c9;
				border-radius: 10rpx;
			}
			.scroll-item {
				width: 128rpx;
				height: 88rpx;
				text-align: center;
				.date {
					line-height: 24rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin: 15rpx 0;
				}
				.weekday {
					line-height: 24rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
	
	.AM-PM {
		width: 100%;
		height: 68rpx;
		background: #F4F5F8;
		border-radius: 10rpx;
		display: flex;
		margin-bottom: 24rpx;
		.AM,
		.PM {
			width: 335rpx;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			font-size: 24rpx;
			color: #242424;
		}
		.active {
			color: #FFFFFF;
			background: #3E9DBB;
			border-radius: 10rpx;
		}
	}
	
	.time-options {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 12rpx;
		.option {
			width: 160rpx;
			height: 76rpx;
			line-height: 76rpx;
			border: 1rpx solid #EEEEEE;
			border-radius: 10rpx;
			text-align: center;
			font-size: 24rpx;
			color: #242424;
			box-sizing: border-box;
			margin: 0 10rpx 12rpx 0;
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
		.disabled {
			color: #aaa !important;
			background: #F4F5F8 !important;
			border: 1rpx solid #EEEEEE !important;
		}
		.active {
			background: #EBF5F8;
			border: 2rpx solid #3E9DBB;
			border-radius: 10rpx;
		}
	}
</style>